<template>
  <div class="reset-password">
    <div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="reset-password-he">
      <h1>重新设置密码</h1>
      <p>8-20个字符,不可以是纯数字</p>
    </div>
    <div class="reset-password-input">
      <!-- 输入密码 -->
      <van-form validate-first>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field v-model="value"  type="password" name="密码" placeholder="请输入密码" :rules="[{ pattern, message: '请输入正确密码' }]"/>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" @click="regiter">
            完成
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>

  import { updateCustomer } from "@/api/login.js";
  import { Toast } from "vant";

  export default {
    name: "reset_password",
    data(){
      return{
        pattern: /^[a-zA-Z]\w{5,17}$/,
        loginName: null,
        value: '',
      }
    },
    created() {
      var phone = this.$route.query.phone;
      this.loginName = phone;
    },
    methods: {
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      regiter(){
        updateCustomer(this.loginName,this.value).then((res) => {
          if(res.data.code == 200){
            Toast({
              message: "修改成功",
              position: "top"
            });
            // 跳转到首页
            this.$router.push({path:"/login_index"});
          }
        });
      }
    }
  }
</script>

<style scoped>
  .reset-password{
    color: black;
    text-align: left;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .reset-password-he h1{
    font-size: 1.5rem;
    padding: 1rem;
    text-align: left;
    margin-top: 30%;
  }
  .reset-password-he p{
    font-size: 0.6rem;
    padding: 0 1rem;
    color: #999999;
  }
  .reset-password-input{
    padding: 1rem;
  }
  .reset-password-input .input{
    border-left: 1px solid #ccc;
    background-color: #ebedf0;
    margin: 0.8rem 0;
  }
</style>
